<template>
  <div id="chart1" style="width: 100%;height:100%;"></div>
</template>

<script>
import { getDicts } from '../../../api/system/dict/data'
import { bubbleSort } from '@/utils/utils'
import { listDevelopmentIndexAll } from '@/api/system/city'

export default {
  name: "echart1",
  data() {
    return {
      panelHeight: 0,
      data_value: [],
      data_name: [],
      echartList:[]
    }
  },
  created() {

  },
  mounted() {
    // setTimeout(()=>{
    //
    // },1000)
    this.getChartData()
  },
  methods: {
    //获取图表数据
    getChartData(){
      listDevelopmentIndexAll(500000).then(res => {
        let data = bubbleSort(res.rows)
        data = data.slice(30,40)
        this.data_value = data.map(item => item.developmentIndex)
        this.data_name = data.map(item => {
          return item.cityName.substring(0,2)
        })
        this.initEcharts1()
      })
      // const response =   getDicts("map_district_ranking").then(response => {
      //   let data = bubbleSort(response.data)
      //   console.log(data,"bubbleSortbubbleSort")
      //   this.data_value = data.map(item => item.dictValue)
      //   this.data_name = data.map(item => item.dictLabel)
      //   this.initEcharts1()
      // })
    },
    getPanelHeight(height){
      this.panelHeight = height
    },
    initEcharts1() {
      var myChart = this.$echarts.init(document.getElementById('chart1'));
      let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      // 指定图表的配置项和数据
      var option = {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#F57474' // 0% 处的颜色
          }, {
            offset: 1, color: '#CA9EEF' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            //名称列表
            data: this.data_name,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval:0,
              // rotate:30,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              }
            },
            axisLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            min:function(value) {
              return value.min - 0.5;
            },
            max:function(value) {
              return value.max;
            },
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12"
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
                // width: 1,
                // type: "solid"
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
            // name: "直接访问", //鼠标放上显示名字
            type: "bar",
            barWidth: "65%",
            //值列表
            data: this.data_value,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                // color: function (params) {
                //   var num = myColor.length;
                //   return myColor[params.dataIndex % num];
                // },
              }
            },
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize",function(){
        myChart.resize();
      });
    }
  }
}
</script>

<style scoped>

</style>
